<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号码：</span>
      <el-input v-model="searchInfo.carNumber" clearable placeholder="请输入内容" class="search-main" />
      <span class="search-label">车主姓名：</span>
      <el-input v-model="searchInfo.personName" clearable placeholder="请输入内容" class="search-main" />
      <span class="search-label">状态：</span>
      <el-select v-model="searchInfo.cardStatus">
        <el-option v-for="item in parkStatus" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      <el-button type="primary" class="search-btn" @click="serarchSubmit">查询</el-button>
    </div>
    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button v-isShowEL="'parking:card:add_edit'" type="primary" @click="addParkCard">添加月卡</el-button>
      <IsShowBtn :btn-prem="'parking:card:remove'">
        <template v-slot:isShow>
          <el-button @click="toggleSelection">批量删除</el-button>
        </template>
      </IsShowBtn>

    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="carInfodata" @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column type="index" label="序号" />
        <el-table-column label="车主名称" prop="personName" />
        <el-table-column label="联系方式" prop="phoneNumber" />
        <el-table-column label="车牌号码" prop="carNumber" />
        <el-table-column label="车辆品牌" prop="carBrand" />
        <el-table-column label="剩余有效天数" prop="totalEffectiveDate" />
        <el-table-column label="状态" prop="cardStatus" :formatter="stateFN" />
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <el-button size="mini" type="text">续费</el-button>
            <el-button size="mini" type="text">查看</el-button>
            <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
            <el-button size="mini" type="text" @click="deletefn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="page-container">
      <el-pagination
        :current-page="page"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      </el-pagination>
    </div>
  </div>
</template>

<script>

import { delPackInfo, getCarInfo, searchParkList } from '@/apis/Car'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      // 列表数据
      carInfodata: [],
      // 总条数
      total: null,
      // 当前页数
      page: 1,
      pageSize: 2,
      // 搜索信息
      searchInfo: {
        carNumber: '',
        personName: '',
        cardStatus: ''
      },
      // 月卡状态显示
      parkStatus: [
        {
          id: null,
          name: '全部'
        },
        {
          id: 0,
          name: '可用'
        },
        {
          id: 1,
          name: '已过期'
        }
      ],
      // 页面选择的数据
      val: []
    }
  },
  // 页面加载时就获取列表数据
  created() {
    this.getCarList()
  },
  methods: {
    // 页面第一次加载获取数据
    async getCarList() {
      const res = await getCarInfo({
        page: this.page,
        pageSize: this.pageSize
      })
      this.carInfodata = res.data.rows
      this.total = res.data.total
    },
    // 格式化列表中的状态内容
    stateFN(row) {
      for (let index = 0; index < this.parkStatus.length; index++) {
        if (row.cardStatus === this.parkStatus[index].id) {
          return this.parkStatus[index].name
        }
      }
    },
    // 查看当前页数
    handleCurrentChange(val) {
      this.page = val
      this.getCarList()
    },
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val
      this.getCarList()
    },
    // 搜索功能
    async serarchSubmit() {
      this.page = 1
      const res = await searchParkList({
        page: this.page,
        pageSize: this.pageSize,
        ...this.searchInfo
      })
      this.carInfodata = res.data.rows
      this.total = res.data.total
    },
    // 添加月卡功能
    addParkCard() {
      this.$router.push('/addPark')
    },
    // 编辑月卡功能
    edit(val) {
      this.$router.push(`/addPark?id=${val.id}`)
    },
    // 删除月卡
    async deletefn(val) {
      this.$confirm('您确认要删除吗', '提示').then(async() => {
        await delPackInfo(val.id)
        this.getCarList()
      })
    },
    // 选择项
    handleSelectionChange(val) {
      this.val = val
    },
    // 批量删除
    toggleSelection() {
      if (this.val.length === 0) {
        Message.error('请选择数据！')
        return
      }
      const ids = this.val.map(item => item.id).join(',')
      this.$confirm('您确认要删除吗', '提示').then(async() => {
        await delPackInfo(ids)
        this.getCarList()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;

  .search-main {
    width: 220px;
    margin-right: 10px;
  }

  .search-btn {
    margin-left: 20px;
  }
}

.create-container {
  margin: 10px 0px;
}

.page-container {
  padding: 4px 0px;
  text-align: right;
}

.form-container {
  padding: 0px 80px;
}
</style>
